<template>
	<view @touchmove.stop class="_flex-row-center-mid _w-max _h-max _pos-fixed _top _left"  style="background-color: rgba(0,0,0,0.3);z-index: 9999;" v-if="picker_modal">
		<view class="time-picker-modal">
			<view class="acea-row">
				<view class="time-type ptb-10" :class="time_type==0?'active':''" @click="chooseType(0)">
					<view class="fs-12 mb-3">取车时间</view>
					<view class="fs-12">
						{{date_list[start_time[0]].month}}月{{date_list[start_time[0]].date}}日{{time_list[start_time[1]]}}
					</view>
				</view>
				<view class="time-type ptb-10"  :class="time_type==1?'active':''" @click="chooseType(1)">
					<view class="fs-12 mb-3">还车时间</view>
					<view class="fs-12">{{date_list[end_time[0]].month}}月{{date_list[end_time[0]].date}}日{{time_list[end_time[1]]}}
					</view>
				</view>
			</view>
			<!-- 取车时间 -->
			<block v-if="time_type==0">
				<picker-view class="time-picker" indicator-class="time-picker-item" @change='pickStart' :value="start_time" @pickstart="pickstart" @pickend="pickend">
					<picker-view-column>
						<view v-for="(item,index) in date_list" v-if="index != date_list.length-1" :key="index" class="time-picker-item">{{item.month}}月{{item.date}}日 {{item.day}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in time_list" :key="index" class="time-picker-item">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</block>
			<!-- 还车时间 -->
			<block v-if="time_type==1">
				<picker-view class="time-picker" indicator-class="time-picker-item" @change='pickEnd' :value="end_time" @pickstart="pickstart" @pickend="pickend">
					<picker-view-column>
						<view v-for="(item,index) in date_list" :key="index" class="time-picker-item">{{item.month}}月{{item.date}}日 {{item.day}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in time_list" :key="index" class="time-picker-item">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</block>
			
			<view class="modal-btn-box acea-row">
				<view class="modal-btn"  @click="cancel">取消</view>
				<view class="modal-btn c-red"  @click="showTimePicker">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
    props:{
      isStar:{
        type:Boolean,
        default:false
      },
      day:{
        type:Number,
        default:1
      }
    },
		data(){
			return{
				picker_modal: false, //显示时间弹窗
				start_time: [], //取车时间
				end_time: [], //还车时间
				date_list: [], //日期列表
				time_list: [], //时间列表
				time_type: 0, //时间选择类型 0取车 1还车
				nav_type:0,//1显示还车时间、2显示取车时间、0全部显示
				loading: false,
			}
		},
		methods:{
			// 滚动开始时
			pickstart(){
				this.loading = true;
			},
			// 滚动结束时
			pickend(){
				this.loading = false;
			},
			// 获取日期
			getDay(day) {
			    var that = this;
			    var date_list = [];
			    for (let i = 0; i < day; i++) {
			      date_list.push(that.dealTime(i));
			    }
			    that.date_list = date_list;
			},
			//计算天数
			dealTime(num) { // num：未来天数
			    var time = new Date(); // 获取当前时间日期
			    var date = new Date(time.setDate(time.getDate() + num)).getDate(); //这里先获取日期，在按需求设置日期，最后获取需要的
			    var year = time.getFullYear();
			    var month = time.getMonth() + 1; // 获取月份
			    var day = time.getDay(); //  获取星期
			    switch (day) { //  格式化
			      case 0:
			        day = "星期日"
			        break
			      case 1:
			        day = "星期一"
			        break
			      case 2:
			        day = "星期二"
			        break
			      case 3:
			        day = "星期三"
			        break
			      case 4:
			        day = "星期四"
			        break
			      case 5:
			        day = "星期五"
			        break
			      case 6:
			        day = "星期六"
			        break
			    }
			    if (month < 10) {
			      month = 0 + "" + month;
			    }
			    if (date < 10) {
			      date = 0 + "" + date;
			    }
			    var obj = {
			      year: year,
			      month: month,
			      date: date,
			      day: day,
			    }
			    return obj // 返回对象
			},
			
			chooseType(e) {
         if(e==1&&this.isStar)return
			    this.time_type = e;
			},
			
			//选择取车时间
			pickStart(e) {
			    var val = e.detail.value,
			      start_val = this.start_val;
			    this.start_time = val;
			    this.end_time = [val[0]+this.day, val[1]];
			},
			
			//选择还车时间
			pickEnd(e) {
			    var val = e.detail.value;
			    var start_time = this.start_time;
			    if (val[0] < start_time[0]) {
			        this.end_time= [start_time[0] + this.day, start_time[1]];
					uni.showToast({title:'还车时间不能在取车时间之前',icon:"none"})
					return
			    }
			    if (val[0] == start_time[0]) {
			      if (val[1] <= start_time[1]) {
						this.end_time= [start_time[0] + this.day, start_time[1]];
						uni.showToast({title:'还车时间不能在取车时间之前',icon:"none"})
						return
					}
			    }
			   this.end_time = val
			},
			
			//计算时间
			calTimes() {
			    var list = [],
			      h = '',
			      time = new Date(Date.parse(new Date()) ), //  + 7200000 date对象  当前时间加上两个小时 
			      now_h = time.getHours(), //当前小时
			      now_m = time.getMinutes(), //当前分钟
			      start_val = [0]; //取车起始值
			    for (let i = 0; i < 24; i++) {
					h = i + '';
					if (i < 10) {
						h = 0 + h;
					}
					//可选时间 早上8点到晚上10点
					if (Number(h)>=8 && Number(h)<=23 ) {
						list.push(h + ":00");
						if(Number(h)!=23){
							list.push(h + ":30");
						}
					}
					//设置起始时间
					if (now_h == i) {
						if (now_m < 30) {
							start_val.push(list.length - 1);
						} else {
							start_val.push(list.length);
						}
					}
			    }
				
			  this.time_list = list;
				this.start_time = start_val;
				this.end_time = [start_val[0]+this.day, start_val[1]];
			},
			
			//显示时间选择弹窗
			showTimePicker(e) {
				let that = this;
				if(that.loading) return uni.showToast({ title:'太快啦~',icon:'none' })
			    var type = e.currentTarget.dataset.type ? e.currentTarget.dataset.type : 0;
				that.time_type = type;
				let date = {};
				date.starTime = {
					year:that.date_list[that.start_time[0]].date.year,
					date:that.date_list[that.start_time[0]],
					time:that.time_list[that.start_time[1]],
					starTime:that.start_time
				}
				date.endTime = {
					year:that.date_list[that.end_time[0]].date.year,
					date:that.date_list[that.end_time[0]],
					time:that.time_list[that.end_time[1]],
					endTime:that.end_time
				}
				that.$emit('getTime',date);
			},
			
			//
			cancel(){
				this.picker_modal = false;
			},
		},
	}
</script>

<style scoped lang="scss">
.acea-row{display:flex;flex-wrap:wrap;}
.ptb-10{padding-top: 20rpx;padding-bottom: 20rpx;}
.fs-12{font-size: 24rpx;}
.mb-3{margin-bottom: 6rpx;}
.display-none{display: none;}
.w-max{width: 100%;}
/* 时间选择弹窗 */
.time-picker-modal{
  width: 600rpx;
  background: #fff;
  overflow: hidden;
  border-radius: 20rpx;
}
.time-picker-modal .time-type{
  width: 50%;
  background: linear-gradient(-88.58deg,var(--theme-color-left),var(--theme-color-right));
  text-align: center;
  color: #666;
}
.time-picker-modal .time-type.active{
  background: linear-gradient(-88.58deg,var(--theme-color-left),var(--theme-color-right));
  color: #fff;
}
.time-picker-modal .modal-btn-box{
border-top: 1px solid #ECECEC;
}
.time-picker-modal .modal-btn{
  line-height: 86rpx;
  flex: 1;
  text-align: center;
  border-right: 1px solid #ECECEC;
}
.time-picker-modal .modal-btn:last-child{
  border: none;
}
.time-picker-modal .time-picker{
  width: 100%;
  height: 400rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.time-picker-item{
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.nav_type {
	
}
</style>